<template>
  <div class="mainBox" v-if="isAdd">
    <div class="contentBox">
      <el-form :model="detailModel" :rules="rules" ref="ruleFormRef">
        <el-form-item
          label="任务名称"
          :label-width="formLabelWidth"
          prop="couponName"
        >
          <el-input
            v-model.trim="detailModel.couponName"
            type="textarea"
            autosize
            maxlength="50"
            placeholder="请输入任务名称"
          />
        </el-form-item>
        <el-form-item
          label="券显示说明"
          :label-width="formLabelWidth"
          prop="couponShowExplain"
        >
          <el-input
            v-model.trim="detailModel.couponShowExplain"
            type="textarea"
            autosize
            maxlength="100"
            placeholder="请输入券显示说明"
          />
        </el-form-item>
        <el-form-item
          label="任务说明"
          :label-width="formLabelWidth"
          prop="couponTaskExplain"
        >
          <el-input
            v-model="detailModel.couponTaskExplain"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
            maxlength="200"
            placeholder="请输入任务说明"
          />
        </el-form-item>
        <el-form-item
          label="使用场景"
          :label-width="formLabelWidth"
          prop="useSceneType"
        >
          <el-radio-group v-model="detailModel.useSceneType">
            <el-radio :label="1">加油</el-radio>
            <el-radio :label="2">洗车</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="发放类型"
          :label-width="formLabelWidth"
          prop="provideType"
        >
          <el-radio-group
            v-model="detailModel.provideType"
            @change="changeProvideType"
          >
            <el-radio :label="1">系统自动发放</el-radio>
            <el-radio :label="2">手动发放</el-radio>
            <el-radio :label="3" v-if="detailModel.useSceneType != 1"
              >自助领取</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="业务类型"
          :label-width="formLabelWidth"
          prop="businessType"
          class="is-required"
        >
          <el-radio-group v-model="detailModel.businessType">
            <el-radio :label="1" v-if="detailModel.provideType == 1"
              >ETC套餐销售</el-radio
            >
            <el-radio :label="2" v-else>其他</el-radio>
          </el-radio-group>
          <el-form-item
            prop="businessName"
            v-if="detailModel.businessType == 2"
            :style="{
              width: pinia.handleLength(detailModel.businessName, 150, 9),
              'margin-left': '30px',
            }"
          >
            <el-input
              v-model.trim="detailModel.businessName"
              placeholder="请输入业务类型"
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item
          label="适用套餐ID"
          :label-width="formLabelWidth"
          prop="scopeIds"
          v-if="detailModel.provideType == 1"
        >
          <el-input
            v-model="detailModel.scopeIds"
            type="textarea"
            readonly
            autosize
            maxlength="30"
            placeholder="请选择适用套餐ID"
            @click="showVip"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item
          label="用户"
          :label-width="formLabelWidth"
          prop="scopeIds"
          v-if="detailModel.provideType == 2"
        >
          <div class="txtBox">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 6 }"
              :formatter="(value) => value.replace(/[^\d|]/g, '')"
              v-model="detailModel.scopeIds"
              autocomplete="off"
              placeholder="用户ID，用多个'|'隔开"
            />
            <el-upload
              :show-file-list="false"
              :auto-upload="false"
              accept=".txt"
              :on-change="openFile"
            >
              <el-button link type="primary" size="small">上传</el-button>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item
          label="适用用户范围"
          :label-width="formLabelWidth"
          prop="userGroupScope"
          v-if="detailModel.provideType == 3"
        >
          <el-checkbox-group v-model="detailModel.userGroupScope">
            <el-checkbox :label="1">展业员</el-checkbox>
            <el-checkbox :label="2">VIP</el-checkbox>
            <el-checkbox :label="3">SVIP</el-checkbox>
            <el-checkbox :label="4">非会员</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="发放条件"
          :label-width="formLabelWidth"
          prop="provideCondition"
        >
          <el-radio-group v-model="detailModel.provideCondition">
            <div v-if="detailModel.provideType == 3">
              <el-radio :label="4">领取成功发放</el-radio>
            </div>
            <div v-else>
              <div v-if="detailModel.provideType == 1">
                <el-radio :label="1">支付成功</el-radio>
                <el-radio :label="2">激活成功</el-radio>
              </div>
              <div v-else>
                <el-radio :label="3">立即发放</el-radio>
              </div>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="单张券面金额"
          :label-width="formLabelWidth"
          style="width: 380px"
          prop="couponPrice"
        >
          <el-input
            v-model.trim="detailModel.couponPrice"
            :formatter="(value) => value.replace(/[^\d|]/g, '')"
            placeholder="请输入单张券面金额"
          />
        </el-form-item>
        <el-form-item
          label="数量"
          :label-width="formLabelWidth"
          prop="content"
          class="is-required"
        >
          <el-form-item prop="periods" style="width: 107px; color: #606266">
            期数
            <el-input
              v-model.trim="detailModel.periods"
              class="input_margin"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              style="width: 40px"
              @input="changePeriods"
              oninput="if(value>36){value=36}"
            />
            期
          </el-form-item>
          <span style="margin-right: 15px; color: red">X</span>
          <el-form-item prop="couponNum" style="width: 120px; color: #606266">
            每期张数
            <el-input
              v-model.trim="detailModel.couponNum"
              class="input_margin"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              oninput="if(value>10){value=10}"
              style="width: 40px"
            />张
          </el-form-item>
          <span style="margin-left: 50px; color: red"
            >{{ detailModel.periods * detailModel.couponNum }}张</span
          >
        </el-form-item>
        <el-form-item
          label="使用条件"
          :label-width="formLabelWidth"
          prop="useCondition"
        >
          <el-radio-group v-model="detailModel.useCondition">
            <el-radio :label="1">不限制金额</el-radio>
            <el-radio :label="2" v-if="detailModel.provideType != 3"
              >限制金额</el-radio
            >
          </el-radio-group>
          <el-form-item
            prop="usePrice"
            v-if="detailModel.useCondition == 2"
            style="width: 150px; margin-left: 30px; color: #606266"
          >
            满<el-input
              v-model.trim="detailModel.usePrice"
              class="input_margin"
              :formatter="(value) => value.replace(/[^\d]/g, '')"
              style="width: 60px"
            />元(含)可用
          </el-form-item>
        </el-form-item>
        <el-form-item
          label="有效期类型"
          :label-width="formLabelWidth"
          prop="validityType"
        >
          <el-radio-group v-model="detailModel.validityType">
            <el-radio :label="1">自动生成</el-radio>
            <el-radio :label="2" :disabled="detailModel.periods > 1"
              >指定有效期</el-radio
            >
          </el-radio-group>
          <el-form-item
            prop="validityDate"
            v-if="detailModel.validityType == 2"
            style="max-width: 250px; margin-left: 30px"
          >
            <el-date-picker
              v-model="detailModel.validityDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :disabled-date="disabledDate"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item
          label="首期券失效期"
          :label-width="formLabelWidth"
          prop="firstCouponExpiryType"
          v-if="detailModel.validityType == 1"
        >
          <el-radio-group v-model="detailModel.firstCouponExpiryType">
            <el-radio :label="1">截止到当月</el-radio>
            <el-radio :label="2">截止到次月</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="券类型"
          :label-width="formLabelWidth"
          prop="couponType"
        >
          <el-radio-group v-model="detailModel.couponType">
            <el-radio :label="1">支付券</el-radio>
            <el-radio :label="2">业务券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="领取次数"
          :label-width="formLabelWidth"
          prop="pickCount"
          v-if="detailModel.provideType == 3"
        >
          <el-radio-group v-model="detailModel.pickCount">
            <el-radio :label="1">不限制</el-radio>
            <el-radio :label="2">每天一次</el-radio>
            <el-radio :label="3">每月一次</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="subBtnBox">
        <el-button type="primary" color="#ea5b24" @click="formSubmit()"
          >保存</el-button
        >
        <el-button
          type="primary"
          color="#ea5b24"
          @click="emit('packConfigBack')"
          >返回</el-button
        >
      </div>
    </div>
    <!-- 查看登陆地dialog -->
    <el-dialog
      v-model="vipDialogVisible"
      draggable
      center="true"
      modal="true"
      width="600px"
    >
      <el-table
        :data="tableData.data"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handleHighlightChangeTable"
        :row-key="getRowKeys"
        ref="vipTable"
      >
        <el-table-column type="selection" :reserve-selection="true" />
        <el-table-column prop="id" label="套餐ID" />
        <el-table-column prop="seriesName" label="套餐系列" />
        <el-table-column prop="vipPrice" label="华行通会员" />
        <el-table-column prop="carType" label="客货类型">
          <template #default="scope">
            {{
              scope.row.carType == null
                ? ""
                : scope.row.carType == 0
                ? "货车"
                : "客车"
            }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <div style="text-align: center">
        <el-pagination
          :total="totalNum"
          @current-change="handleCurrentChange"
          background
          :page-size="size"
          layout="prev, pager, next, total"
          :current-page="page"
          small
        />
      </div>
      <div class="subBtnBox">
        <el-button type="primary" color="#ea5b24" @click="addScopeIds"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
  <div class="mainBox" v-else>
    <div class="descriptionsBox">
      <el-descriptions :column="1" border>
        <el-descriptions-item
          label="任务名称"
          label-align="right"
          label-class-name="labelCss"
        >
          {{ detailModel.couponName }}
        </el-descriptions-item>
        <el-descriptions-item label="券显示说明" label-align="right">
          {{ detailModel.couponShowExplain }}
        </el-descriptions-item>
        <el-descriptions-item label="任务说明" label-align="right">
          {{ detailModel.couponTaskExplain }}
        </el-descriptions-item>
        <el-descriptions-item label="使用场景" label-align="right">
          {{ detailModel.useSceneType == 1 ? "加油" : "洗车" }}
        </el-descriptions-item>
        <el-descriptions-item label="发放类型" label-align="right">
          {{ judgeProvideType(detailModel.provideType) }}
        </el-descriptions-item>
        <el-descriptions-item label="业务类型" label-align="right">
          {{ detailModel.businessType == 1 ? "ETC套餐销售" : "其他:" }}
          <div class="txtBox" v-if="detailModel.businessType == 2">
            {{ detailModel.businessName }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="适用套餐ID"
          label-align="right"
          v-if="detailModel.provideType == 1"
        >
          <div class="txtBox">
            {{ detailModel.scopeIds }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="用户"
          label-align="right"
          v-if="detailModel.provideType == 2"
        >
          <div class="txtBox">
            {{ detailModel.scopeIds }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="适用用户范围"
          label-align="right"
          v-if="detailModel.provideType == 3"
        >
          {{ judgeUserGroupScope(detailModel.userGroupScope) }}
        </el-descriptions-item>
        <el-descriptions-item label="发放条件" label-align="right">
          {{ judgeProvideCondition(detailModel.provideCondition) }}
        </el-descriptions-item>
        <el-descriptions-item label="单张券面金额" label-align="right">
          {{ detailModel.couponPrice }}
        </el-descriptions-item>
        <el-descriptions-item label="数量" label-align="right">
          {{
            `期数( ${detailModel.periods} )期  X  每期张数( ${
              detailModel.couponNum
            } )张  =  总量( ${detailModel.periods * detailModel.couponNum} )张`
          }}
        </el-descriptions-item>
        <el-descriptions-item label="使用条件" label-align="right">
          {{ detailModel.useCondition == 1 ? "不限制金额" : "限制金额:" }}
          <div class="txtBox" v-if="detailModel.useCondition == 2">
            {{ `满( ${detailModel.usePrice} )元(含)可用` }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="有效期类型" label-align="right">
          {{ detailModel.validityType == 1 ? "自动生成" : "指定有效期:" }}
          <div class="txtBox" v-if="detailModel.validityType == 2">
            {{ detailModel.validityDate }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="首期券失效期"
          v-if="detailModel.validityType == 1"
          label-align="right"
        >
          {{
            detailModel.firstCouponExpiryType == 1 ? "截止到当月" : "截止到次月"
          }}
        </el-descriptions-item>
        <el-descriptions-item
          label="领取次数"
          v-if="detailModel.provideType == 3"
          label-align="right"
        >
          {{ judgePickCount(detailModel.pickCount) }}
        </el-descriptions-item>
        <el-descriptions-item label="券类型" label-align="right">
          {{ detailModel.couponType == 1 ? "支付券" : "业务券" }}
        </el-descriptions-item>
        <div v-if="detailModel.status != 0">
          <el-descriptions-item label="审核人" label-align="right">
            {{ detailModel.auditorName }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间" label-align="right">
            {{ detailModel.auditorTime }}
          </el-descriptions-item>
        </div>
      </el-descriptions>
      <div class="subBtnBox">
        <div v-if="detailModel.status == 0" style="margin-right: 15px">
          <el-button
            type="primary"
            color="#ea5b24"
            @click="toExamine(1)"
            v-if="pinia.isShow[170]"
            >审核通过</el-button
          >
          <el-button
            type="primary"
            color="#ea5b24"
            @click="isShowDialogVisible = true"
            v-if="pinia.isShow[171]"
            >审核不通过</el-button
          >
        </div>
        <el-button
          type="primary"
          color="#ea5b24"
          @click="emit('packConfigBack')"
          >返回</el-button
        >

        <el-dialog
          v-model="isShowDialogVisible"
          title="营销任务审核"
          center="true"
          modal="true"
          width="450px"
        >
          <el-form :model="toExamineModel">
            <el-form-item label="不通过原因">
              <el-input
                v-model="toExamineModel.auditorCause"
                :autosize="{ minRows: 4 }"
                placeholder="请输入不通过原因."
                type="textarea"
                autocomplete="off"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="isShowDialogVisible = false">取消</el-button>
              <el-button type="primary" color="#ea5b24" @click="toExamine(3)"
                >确定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  findMarketTasInfoByIdApi,
  addMarketTaskApi,
  checkMarketTasApi,
  findVipApi,
} from "../../../api/index";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { formatDateTime } from "../../../utils/formatDateTime";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 父级传递过来的参数
const props = defineProps({
  detaildData: Object,
});
//父级传递的方法
const emit = defineEmits(["packConfigBack"]);
const formLabelWidth = "200px";

//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  couponName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
  couponShowExplain: [
    { required: true, message: "请输入券显示说明", trigger: "blur" },
  ],
  businessName: [
    { required: true, message: "请输入业务类型", trigger: "blur" },
  ],
  scopeIds: [{ required: true, message: "请选择", trigger: "blur" }],
  userGroupScope: [
    { required: true, message: "请选择适用用户范围", trigger: "blur" },
  ],
  provideCondition: [
    { required: true, message: "请选择发放条件", trigger: "blur" },
  ],
  couponPrice: [
    { required: true, message: "请输入单张券面金额", trigger: "blur" },
  ],
  periods: [{ required: true, message: "请输入期数", trigger: "blur" }],
  couponNum: [{ required: true, message: "请输入每期张数", trigger: "blur" }],
  usePrice: [{ required: true, message: "请输入限制金额", trigger: "blur" }],
  validityDate: [{ required: true, message: "请选择有效期", trigger: "blur" }],
  firstCouponExpiryType: [
    { required: true, message: "请选择首期券失效期", trigger: "blur" },
  ],
  pickCount: [{ required: true, message: "请选择领取次数", trigger: "blur" }],
  couponType: [{ required: true, message: "请选择券类型", trigger: "blur" }],
});

// 判断是新增还是审核
let isAdd: any = ref(true);
// 任务状态
let MKTID: any = ref(null);

// 控制不通过原因输入框
let isShowDialogVisible = ref(false);

// 用户控制
let isAllUid = ref(true);
let targetUid = ref(null);

// 任务详情数据模型
let detailModel: any = reactive({
  couponName: null,
  couponShowExplain: null,
  couponTaskExplain: null,
  useSceneType: 2,
  provideType: 1,
  businessType: 1,
  businessName: null,
  scopeIds: null,
  userGroupScope: [],
  provideCondition: null,
  couponPrice: null,
  periods: null,
  couponNum: null,
  useCondition: 1,
  usePrice: null,
  validityType: 1,
  validityDate: null,
  validityStartTime: null,
  validityEndTime: null,
  firstCouponExpiryType: null,
  pickCount: null,
  couponType: null,

  status: null, //状态
  auditorName: null, //审核人
  auditorTime: null, //审核时间
});

// 审核参数模型
let toExamineModel: any = reactive({
  id: null,
  status: null,
  auditorCause: null,
});

// 选择套餐dialog控制
const vipDialogVisible = ref(false);
// 选中的套餐数据
let vipData: any = reactive([]);
// 分页数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 翻页
let flipData = reactive({
  page: page,
  size: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.page = page.value;
  find(flipData);
};

// 过滤发放类型显示
function judgeProvideType(item) {
  switch (item) {
    case 1:
      return "系统自动发放";
    case 2:
      return "手动发放";
    case 3:
      return "自助领取";
    default:
      return "";
  }
}

// 过滤适用套餐范围
function judgeUserGroupScope(item) {
  if (typeof item == "string" && item.constructor == String) {
    item = item.replace("1", "展业员");
    item = item.replace("2", "VIP");
    item = item.replace("3", "SVIP");
    item = item.replace("4", "非会员");
  }
  return item;
}

// 过滤发放条件显示
function judgeProvideCondition(item) {
  switch (item) {
    case 1:
      return "支付成功";
    case 2:
      return "激活成功";
    case 3:
      return "立即发放";
    case 4:
      return "领取成功发放";
    default:
      return "";
  }
}

// 过滤领取次数显示
function judgePickCount(item) {
  switch (item) {
    case 1:
      return "不限制";
    case 2:
      return "每天一次";
    case 3:
      return "每月一次";
    default:
      return "";
  }
}

//上传txt文档
const openFile = (file) => {
  if (!file) {
    // 没有文件
    return false;
  } else if (!/\.(txt)$/.test(file.name.toLowerCase())) {
    // 格式根据自己需求定义
    ElMessage.error("上传格式不正确，请上传txt格式.");
    return false;
  }
  var reader = new FileReader();
  reader.onload = function () {
    if (reader.result) {
      //打印文件内容
      detailModel.scopeIds = reader.result;
    }
  };
  reader.readAsText(file.raw);
};

// 发放类型改变
const changeProvideType = (val) => {
  detailModel.scopeIds = null;
  if (val == 1) {
    detailModel.businessType = 1;
    detailModel.provideCondition = null;
  }
  if (val == 2) {
    detailModel.businessType = 2;
    detailModel.provideCondition = 3;
  }
  if (val == 3) {
    detailModel.businessType = 2;
    detailModel.provideCondition = 4;
    detailModel.useCondition = 1;
  }
};

// 周期数改变
const changePeriods = (val) => {
  if (parseInt(val) > 1) {
    detailModel.validityType = 1;
  }
};

// 查询账单详情信息
const findMKTInfo = (id) => {
  findMarketTasInfoByIdApi(id).then((res) => {
    if (res.data.code === 2000) {
      const detailData = res.data.data;
      detailModel.couponName = detailData.couponName;
      detailModel.couponShowExplain = detailData.couponShowExplain;
      detailModel.couponTaskExplain = detailData.couponTaskExplain;
      detailModel.useSceneType = detailData.useSceneType;
      detailModel.provideType = detailData.provideType;
      detailModel.businessType = detailData.businessType;
      detailModel.businessName = detailData.businessName;
      detailModel.scopeIds = detailData.scopeIds;
      detailModel.userGroupScope = detailData.userGroupScope;
      detailModel.provideCondition = detailData.provideCondition;
      detailModel.couponPrice = detailData.couponPrice;
      detailModel.periods = detailData.periods;
      detailModel.couponNum = detailData.couponNum;
      detailModel.useCondition = detailData.useCondition;
      detailModel.usePrice = detailData.usePrice;
      detailModel.validityType = detailData.validityType;
      if (detailData.validityStartTime && detailData.validityEndTime) {
        detailModel.validityDate = `${detailData.validityStartTime.slice(
          0,
          10
        )} ~ ${detailData.validityEndTime.slice(0, 10)}`;
      }
      detailModel.validityStartTime = detailData.validityStartTime;
      detailModel.validityEndTime = detailData.validityEndTime;
      detailModel.firstCouponExpiryType = detailData.firstCouponExpiryType;
      detailModel.pickCount = detailData.pickCount;
      detailModel.couponType = detailData.couponType;

      detailModel.status = detailData.status;
      detailModel.auditorName = detailData.auditorName;
      detailModel.auditorTime = detailData.auditorTime;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 添加提交
const formSubmit = pinia.debounce(() => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log(detailModel.userGroupScope);
      if (detailModel.validityDate) {
        detailModel.validityStartTime = formatDateTime(
          detailModel.validityDate[0]
        );
        detailModel.validityEndTime = formatDateTime(
          detailModel.validityDate[1]
        ).replace("00:00:00", "23:59:59");
      }
      if (detailModel.userGroupScope) {
        detailModel.userGroupScope = detailModel.userGroupScope.join(",");
      }

      addMarketTaskApi(detailModel).then((res) => {
        if (res.data.code === 2000) {
          ElMessage({
            message: "添加成功.",
            type: "success",
          });
          // // 展示详情
          // MKTID = res.data.data;
          // findMKTInfo(MKTID);
          // isAdd.value = false;
          // 返回列表
          emit("packConfigBack");
        } else {
          detailModel.userGroupScope = detailModel.userGroupScope
            .split(",")
            .map((item) => {
              return +item;
            });
          console.log(detailModel.userGroupScope);

          switch (res.data.code) {
            default:
              ElMessage.error("添加失败.");
              break;
          }
        }
      });
    } else {
      return false;
    }
  });
});

// 审核
const toExamine = (state) => {
  if (
    state == 3 &&
    (toExamineModel.auditorCause == "" || toExamineModel.auditorCause == null)
  ) {
    ElMessage.error("请输入不通过原因.");
    return;
  }
  toExamineModel.status = state;
  toExamineModel.id = MKTID;
  checkMarketTasApi(toExamineModel).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "审核成功.",
        type: "success",
      });
      isShowDialogVisible.value = false;
      emit("packConfigBack");
    } else {
      ElMessage.error("审核失败.");
    }
  });
};

// 显示套餐选择弹层
const showVip = () => {
  find(flipData);
  vipDialogVisible.value = true;
};

// 查询vip套餐列表
const find = (searchModel) => {
  findVipApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.items;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

const getRowKeys = (row) => {
  return row.id;
  // 需要return的是一个唯一的标识值
};

// 勾选套餐
const handleSelectionChange = (val) => {
  vipData = val;
};

// 套餐table元素
const vipTable = ref(null);
// 选中行
const handleHighlightChangeTable = (val) => {
  // 如果vipData中不存在则勾选，存在则取消勾选
  if (JSON.stringify(vipData).indexOf(JSON.stringify(val)) == -1) {
    vipTable.value.toggleRowSelection(val, true);
  } else {
    vipTable.value.toggleRowSelection(val);
  }
};

// 保存选定套餐的id
const addScopeIds = () => {
  let idArr = [];
  vipData.forEach((item) => {
    idArr.push(item.id);
  });
  detailModel.scopeIds = idArr.join(",");
  vipDialogVisible.value = false;
};

const disabledDate = (time: Date) => {
  // return time.getTime() > Date.now()
  return time.getTime() < Date.now() - 8.64e7;
};

onMounted(() => {
  if (props.detaildData.id) {
    MKTID = props.detaildData.id;
    isAdd.value = false;
    findMKTInfo(MKTID);
  } else {
    isAdd.value = true;
  }
});
</script>

<style scoped>
.mainBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
  /* border: 1px solid red; */
  width: 100%;
}
.contentBox {
  background-color: #ffffff;
  border-radius: 32px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 800px;
  display: flex;
  flex-direction: column;
}

.descriptionsBox {
  width: 700px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
}

.subBtnBox {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

:deep(.labelCss) {
  width: 130px;
}

.txtBox {
  display: flex;
  word-break: break-all;
  width: 100%;
}

.btnBox {
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.input_margin {
  margin-left: 5px;
  margin-right: 5px;
}
.right {
  margin-left: 20px;
}
</style>
